<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-28 18:46:08
-->
<template>
  <el-card>
    <vxe-button
      status="primary"
      content="添加一级分类"
      icon="vxe-icon-add"
      size="small"
    ></vxe-button>

    <vxe-table
      style="margin-top: 20px"
      border
      ref="tableRef"
      :row-config="{ keyField: 'rowId' }"
      :column-config="{ resizable: true }"
      :tree-config="treeConfig"
      :data="tableData"
    >
      <vxe-column type="seq" width="120" align="center"></vxe-column>
      <vxe-column field="name" title="分类列表" tree-node></vxe-column>
      <vxe-column title="操作" width="300">
        <template #default>
          <vxe-button
            status="primary"
            content="添加"
            icon="vxe-icon-add"
          ></vxe-button>
          <vxe-button
            status="warning"
            content="修改"
            icon="vxe-icon-add"
          ></vxe-button>
          <vxe-button
            status="danger"
            content="删除"
            icon="vxe-icon-add"
          ></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
  </el-card>
</template>

<script lang="ts" setup>
import { useAttrStore } from '@/stores/attr'
import { storeToRefs } from 'pinia'
import { onMounted, reactive, ref } from 'vue'
import type { VxeTablePropTypes } from 'vxe-table'

const categoryStore = useAttrStore()
// const { category1Id, category1List } = storeToRefs(categoryStore)
const tableRef = ref()

interface ItableData {
  id: number
  name: string
  parentId: number | null
  hasChild?: boolean
  rowId: number
}
const treeConfig = reactive<VxeTablePropTypes.TreeConfig<ItableData>>({
  transform: true,
  rowField: 'id',
  parentField: 'parentId',
  lazy: true,
  hasChild: 'hasChild',
  loadMethod({ row }) {
    // 异步加载子节点
    return fetchChildListApi(row)
  },
})
// 模拟后台
const fetchChildListApi = async (row: ItableData) => {
  if (!row.parentId) {
    // 点击的是一级列表
    await categoryStore.getCategory2List(row.id)
    let { category2List } = storeToRefs(categoryStore)
    return category2List.value.map((item) => {
      return {
        id: item.id,
        name: item.name,
        parentId: row.id,
        hasChild: true,
        rowId: item.id + 10000,
      }
    })
  } else if (row.hasChild) {
    // 点击的二级列表
    await categoryStore.getCategory3List(row.id)
    let { category3List } = storeToRefs(categoryStore)
    return category3List.value.map((item) => {
      return {
        id: item.id,
        name: item.name,
        parentId: row.id,
        hasChild: false,
        rowId: item.id + 20000,
      }
    })
  } else {
    return []
  }
}

const tableData = ref<ItableData[]>()
// 获取一级列表数据
const getCategory1List = async () => {
  await categoryStore.getCategory1List()
  let { category1List } = storeToRefs(categoryStore)
  tableData.value = category1List.value.map((item) => {
    return {
      id: item.id,
      name: item.name,
      parentId: null,
      hasChild: true,
      rowId: item.id,
    }
  })
}
onMounted(() => {
  getCategory1List()
})
</script>

<script lang="ts">
export default {
  name: 'CategoryView',
}
</script>

<style lang="scss" scoped></style>
